<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <el-tabs class="tab">
          <el-tab-pane label="组织结构"></el-tab-pane>
        </el-tabs>
        <div class="container">
          <treeTool :depart="depart" :isTitle="true" />
        </div>
        <el-tree :data="dataList" node-key="id" default-expand-all class="container">
          <treeTool
            slot-scope="{data}"
            :depart="data"
            :isRoot="isRoot"
            @delDepartmentById="delDepartmentById"
          />
        </el-tree>
      </el-card>
      <dialogTool @getDepartments="getDepartments" />
    </div>
  </div>
</template>

<script>
import dialogTool from "@/views/department/dialog-tool";
import treeTool from "@/views/department/tree-tool";
import { getDepartmentsToTree } from "@/utils";
export default {
  data() {
    return {
      depart: { name: "", manager: "" },
      dataList: [],
      isRoot: true
    };
  },
  mounted() {
    this.getDepartments();
  },
  methods: {
    //获取部门信息
    async getDepartments() {
      let result = await this.$api.department.getDepartments();
      if (result) {
        this.depart.name = result.companyName;
        this.dataList = getDepartmentsToTree(result.depts, "");
        this.depart.manager = "负责人";
      }
    },
    //删除某个部门
    async delDepartmentById(id) {
      try {
        await this.$api.department.delDepartmentById(id);
        this.$message.success("删除成功!!");
        this.getDepartments();
      } catch (error) {}
    }
  },
  components: {
    treeTool,
    dialogTool
  }
};
</script>

<style>
.tab {
  user-select: none;
}
.container {
  width: 100%;
  padding: 10px 50px;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>